<template>
  <div class="search">
  	<input :type="type" @input="input" :value="Val" :placeholder="placeholder" @keydown.enter="enter">
  	<i class="jcfont jcsearch icon-search"></i>
    <div class="close" @click.stop="close" :class="{show:Val}">✕</div>
  </div>
</template>

<script>
  export default {
  	data(){
  		return{
  			Val: ''
  		}
  	},
  	props: {
  		value: {
  			type: String,
  			default: ''
  		},
  		type: {
  			type: String,
  			default: 'text'
  		},
  		placeholder: {
  			type: String,
  			default: '请输入搜素的内容'
  		}
  	},
  	watch:{
  		value: {
  			handler(newVal){
  				this.Val = newVal;
  			},
  			immediate:true
  		}
  	},
  	methods:{
  		//输入事件
  		input(e){
  			let value = e.target.value;
  			this.Val = value;
  			this.$emit('input',value);
  		},
  		//清空事件
  		close(){
  			this.Val = '';
  			this.$emit('close');
  		},
      //确认
      enter(){
        this.$emit('enter',this.Val)
      }
  	}
  }
</script>

<style lang="scss" scoped>
  .search{
  	position: relative;
    display:inline-block;
    padding-left: 30px;
    padding-right: 15px;
    box-sizing: border-box;
    border: 1px solid #666;
    border-radius: 30px;
    height: 30px;
    .icon-search{
      position:absolute;
      left: 8px;
      top: 6px;
      pointer-events: none;
    }
    .close{
    	width: 18px;
    	height: 18px;
    	border-radius: 50%;
    	background-color: rgba(0,0,0,0.2);
    	font-size: 9px;
    	color: #fff;
    	@include flex;
    	position: absolute;
    	right: 10px;
    	top: 50%;
    	transform: translateY(-50%);
    	opacity: 0;
      z-index:99;
      cursor: pointer;
    	transition: opacity 0.5s;
    	&.show{
    		opacity: 1;
    	}
    }
  }
  input{
  	width: 235px;
  	display: inline-flex;
  	outline: none;
  	font-size: 14px;
    line-height: 28px;
    border: none;
  	background-color: transparent;
    align-items: center;
    vertical-align: baseline;
  }
</style>
